<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>About Us</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/pe-icons.css" rel="stylesheet">
    <link href="css/prettyPhoto.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/pagination.css" rel="stylesheet">
    <link rel="stylesheet" href="layui/css/layui.css">
    <link href="css/mycss.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <script src="js/jquery.js"></script>
    <link rel="shortcut icon" href="images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/images/ico/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57x57.png">

    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            'use strict';
            jQuery('body').backstretch([
                "images/bg/bg1.jpg",
                "images/bg/bg2.jpg",
                "images/bg/bg3.jpg"
            ], {duration: 5000, fade: 500});


        });
    </script>
</head><!--/head-->
<body>
<div id="preloader"></div>
<div th:replace="index :: header"></div>

<section id="single-page-slider" class="no-margin">
    <div class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="center gap fade-down section-heading">
                                <h2 class="main-title">攀枝花热门景点</h2>
                                <hr>
                                <p>Hot spots in Panzhihua</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!--/.item-->
        </div><!--/.carousel-inner-->
    </div><!--/.carousel-->
</section><!--/#main-slider-->

<div id="content-wrapper">
    <section id="blog" class="white">
        <div class="container">
            <ul class="portfolio-filter fade-down center" id="menuItem">
                <li><a class="btn btn-outlined btn-primary active myserach" num = "0" href="#" data-filter="*">所有</a></li>
                <!--                <li><a class="btn btn-outlined btn-primary" href="#" data-filter="">5A景区</a></li>-->
                <!--                <li><a class="btn btn-outlined btn-primary" href="#" data-filter=".wordpress">4A景区</a></li>-->
                <!--                <li><a class="btn btn-outlined btn-primary" href="#" data-filter=".bootstrap">3A景区</a></li>-->
                <!--                <li><a class="btn btn-outlined btn-primary" href="#" data-filter=".html">2A景区</a></li>-->
                <!--                <li><a class="btn btn-outlined btn-primary" href="#" data-filter=".wordpress">文博科教</a></li>-->
                <!--                <li><a class="btn btn-outlined btn-primary" href="#" data-filter=".wordpress">遗产古迹</a></li>-->
                <!--                <li><a class="btn btn-outlined btn-primary" href="#" data-filter=".wordpress">展览场馆</a></li>-->
            </ul><!--/#portfolio-filter-->
            <div class="row" id="userPageBody">

                <!--                <li class="portfolio-item apps isotope-item">-->
                <!--                    <div class="item-inner post">-->
                <!--                        <div class="post-img-content">-->
                <!--                            <img src="images/portfolio/folio02.jpg" class="img-responsive"/>-->
                <!--                            <div class="overlay">-->
                <!--                                <a class="preview btn btn-outlined btn-primary" href="#"><i class="fa fa-link"></i></a>-->
                <!--                            </div>-->
                <!--                        </div>-->
                <!--                        <div class="content">-->
                <!--                            <h2 class="post-title">攀枝花京都大酒店</h2>-->
                <!--                            <div class="author">-->
                <!--                                <i class="fa fa-user"></i> By <b>涛宝宝</b> | <i class="fa fa-clock-o"></i>-->
                <!--                                <time datetime="2019-01-20">April 11th, 2019</time>-->
                <!--                            </div>-->
                <!--                            <div>-->
                <!--                                京都大酒店是攀枝花第一批高端商务酒店，汇集了攀枝花的各方面的精英人士，为了攀枝花的共同繁荣贡献出了自己最大一份力量-->
                <!--                            </div>-->
                <!--                            <div class="read-more-wrapper">-->
                <!--                                <a href="#" class="btn btn-outlined btn-primary">查看详情</a>-->
                <!--                            </div>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                </li>&lt;!&ndash;/.portfolio-item&ndash;&gt;-->
                <div class="gap"></div>
            </div>
            <div id="Pagination" class="pagination" style="float: right"><!-- 这里显示分页 --></div>
        </div>
    </section>
</div>

<div th:replace="information :: Pagefoot"></div>
<!--设置一个分类Id的隐藏域；-->
<input type="hidden" th:value="${classificationId}" id="classificationId">


<script src="js/bootstrap.min.js"></script>
<script src="layui/layui.js"></script>
<script src="js/plugins.js"></script>
<script src="js/init.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/jquery.pagination.js"></script>
<script src="js/widgets.js"></script>
<script src="js/common.js"></script>


<script>
    $(function () {

        //大摇大摆的写我的jquery了;
        window.pageNo = 1;
        window.classificationId = 0;

        //获取分类信息；
        $.ajax({
            "url": "get/scenery/classification",
            "type": "post",
            "dataType": "json",
            "error": function (response) {
                var message = response.responseJSON.message;
                layer.msg(message);
            },
            "success": function (response) {
                //进行元素的动态添加
                gerationMenuItem(response.data);
                //添加动画，并绑定搜索；
                gerationAnimation();

                generateUserPage();
                //检查有无直接选定的属性！；
                checkOptionClassicication();
            }
        });

    });

    function gerationMenuItem(data) {
        var classificationId = $("#classificationId").val();
        //进行全局变量的赋值
        if(classificationId != null){
            window.classificationId = classificationId;
        }
        // console.log("这是生成MenuItem的方法"+classificationId);
        $.each(data, function (index, value) {
            if (value.id == classificationId){
                var html = "<li><a class='btn btn-outlined btn-primary myserach optionClassicication' href='#' num = "+value.id+">" + value.categorizationInformation + "</a></li>";
            }else {
                var html = "<li><a class='btn btn-outlined btn-primary myserach' href='#' num = "+value.id+">" + value.categorizationInformation + "</a></li>";
            }
            $("#menuItem").append(html);
        });
    }

    function gerationAnimation() {
        /**
         * 先找到父元素：$(this).parent();
         * 找到父元素的兄弟元素：$(parents).siblings();
         * 然后遍历兄弟元素，删除a标签中的class属性：$(value).children().removeClass("active");
         * $.each中都的输入参数都是集合或者数组对象，遍历出来的value也都是dom对象，不是jquery对象。
         */
        $(".myserach").click(function () {
            var parents = $(this).parent();
            // $.each(parents,function (index,value) {
            //     $(value).children().removeClass("active");
            // });
            var siblings = $(parents).siblings();
            $.each(siblings, function (index, value) {
                $(value).children().removeClass("active");
            });
            $(this).addClass("active");

            //我们现在要进行查询数据的操作了；
            //获取分类属性的id；
            var id = $(this).attr("num");

            window.classificationId = id;
            // console.log(id);
            //重新执行分页的函数；
            generateUserPage();

        });
    }

    //煞费苦心，不能挂了呀，这个方法。
    function checkOptionClassicication() {
        var optionClassicication = $(".optionClassicication");
        //jquery选择器若是为选择到元素，不能直接判断等于空。可以.length == 0;或者if(".xx")[0]{};来获得第一个元素进行判断；
        // console.log("这是检查的方法"+optionClassicication.length);
        if (optionClassicication.length == 0){
            return;
        } else {
            optionClassicication.removeClass("checkOptionClassicication");
            optionClassicication.click();
        }
    }


    function generateUserPage() {
        // console.log("这是生成网格数据的方法");
        // console.log(classificationId);
        // console.log("generateUserPage.html中的分类编号。。"+classificationId);
        //发送请求，获得数据
        $.ajax({
            "url": "get/all/index/sceneryItem",
            "type": "post",
            "data": {
                "classificationId":window.classificationId,
                "pageNo": window.pageNo
            },
            "contentType": "application/x-www-form-urlencoded",
            // 预期服务器返回的数据
            "dataType": "json",
            "error": function (response) {
                var message = response.responseJSON.message;
                layer.msg(message);
            },
            "success": function (response) {

                //获取分页数据
                var pageInfo = response.data;

                //生成表格数据,因为是异步请求,所以生成表格的代码必须写在success的回调函数中;
                generateUserTable(pageInfo);

                //初始化页码导航条
                generateNavigator(pageInfo);

                // checkOptionClassicication();
            }
        });
    }


    //生成表格数据
    function generateUserTable(pageInfo) {
        //清除旧的数据
        $("#userPageBody").empty();

        //获取list属性对应的数据
        var list = pageInfo.list;

        //检测list是否包含有效数据
        if (list == null || list.length == 0) {
            $("#userPageBody").append("<h1 align='center'>抱歉！为查询到任何匹配的数据！</h1>");
            return;
        }

        //遍历list,从data中获取数据
        for (var i = 0; i < list.length; i++) {
            var indexSceneryItem = list[i];
            var itemId = indexSceneryItem.id;
            var sceneryName = indexSceneryItem.sceneryName;
            var categorizationInformationId = indexSceneryItem.categorizationInformationId;
            var sceneryData = indexSceneryItem.sceneryData;
            var sceneryTel = indexSceneryItem.sceneryTel;
            var sceneryAddress = indexSceneryItem.sceneryAddress;
            var backgroudImageSrc = indexSceneryItem.backgroudImageSrc;
            if (backgroudImageSrc == null) {
                backgroudImageSrc = "http://39.107.45.130:8001/group1/M00/00/00/rBHE-F5sPJSAIpJTAAb804eX_u4753.jpg";
            }

            // 使用元素动态进行绑定；
            var trHTML = "<div class='col-md-4'><div class='post'><div class='post-img-content'><img src='"+backgroudImageSrc+"' class='img-responsive'/><div class='overlay'><a class='preview btn btn-outlined btn-primary' href='"+backgroudImageSrc+"'  rel='prettyPhoto'><i class='fa fa-eye'></i></a></div>" +
                "</div><div class='content'><h2 class='post-title'>"+sceneryName+"</h2><div class='author'><i class='fa fa-user'></i> By <b>攀枝花官方</b> | <i class='fa fa-clock-o'></i><time datetime='2019-01-20'>"+sceneryData+"</time></div>" +
                "<div>联系电话:<P>"+sceneryTel+"</p>景点地址:<P>"+sceneryAddress+"</p>所属分类:<P>"+categorizationInformationId+"</p></div><div class='read-more-wrapper'><a target='_blank' href='show_scenery_details?itemId=" + itemId + "' class='btn btn-outlined btn-primary' >查看详情</a></div></div></div></div>";
            $("#userPageBody").append(trHTML);
        }
    }

    function generateNavigator(pageInfo) {

        $("a[rel^='prettyPhoto']").prettyPhoto();

        // 获取分页总记录数
        var totalRecordNo = pageInfo.total;

        // 创建分页
        $("#Pagination").pagination(totalRecordNo, {
            num_edge_entries: 3, 				//边缘页数
            num_display_entries: 4, 			//主体页数
            callback: pageSelectCallback,		//点击具体页码时调用这个函数
            items_per_page: pageInfo.pageSize, 	//每页显示1项
            current_page: (pageInfo.pageNum - 1),	//当前页索引，需要将pageInfo.pageNum-1才是合适的值
            prev_text: "上一页",					//上一页按钮的文本
            next_text: "下一页",					//下一页按钮的文本
        });
    }

    function pageSelectCallback(page_index, jq) {

        //page_index+1等于要前往的页面的页码
        window.pageNo = page_index + 1;

        //调用分页函数
        generateUserPage();

        return false;
    }


</script>

</body>
</html>
